<!--
* @Author: 杨小龙/Yangxiaolong
* @Description: component_name ；
* @Date: 2021-00-00 00:00:00
-->
<template>
  <div class="left-container">
    <component
      v-for="(component, i) in components"
      :key="i"
      :is="component.component"
    ></component>
  </div>
</template>
<script setup lang="ts">
import { shallowRef } from "vue";
import SalesStat from "@/views/screen/components/body/left/components/SalesStat.vue";
import AreaSales from "@/views/screen/components/body/left/components/AreaSales.vue";

const components = shallowRef([
  {
    name: "SalesStat",
    component: SalesStat,
  },
  {
    name: "AreaSales",
    component: AreaSales,
  },
]);
</script>
<style lang="scss" scoped>
.left-container {
  width: 100%;
  height: 100%;
  animation-name: slide;
  animation-duration: 1s;

  & > div {
    margin-bottom: 10px;
  }
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
</style>
